@extends('Admin.base')
@section('style')
    <style>

    </style>
@endsection
@section('content')
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="module-tab" id="module-tab">
            <ul class="layui-tab-title">
                @foreach($data as $key => $module)
                    {{--class="{{$key==0 ? 'layui-this layui-table-start' : ''}}"--}}
                    <li lay-id="{{$module->id}}" data-module-id="{{$module->id}}" class="module-tab-li">{{$module->module}}</li>
                @endforeach
            </ul>
            <div class="layui-tab-content">
                @foreach($data as $key => $module)
                <div class="layui-tab-item {{$key==0 ? 'layui-show' : ''}}">
                    <form action="" id="module-form-{{$module->id}}">
                    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                        <div class="layui-form-item layui-row">
                            <div class="layui-col-md4">
                                <label class="layui-form-label">模块名称</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="id" value="{{$module->id}}">
                                    {{method_field('PUT')}}
                                    <input type="text" name="module" placeholder="请输入" autocomplete="off" class="layui-input" value="{{$module->module}}">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <label class="layui-form-label">启用状态</label>
                                <div class="layui-input-block" style=" display: flex; align-items:center;">
                                    <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" value="1" {{($module->status == \App\Models\GoodsHome::STATUS_OPEN) ? 'checked' : ''}}>
                                </div>
                            </div>
                            @if($module->status == \App\Models\GoodsHome::STATUS_CLOSE)
                            <div class="layui-col-md4">
                                <a href="javascript:void(0);" class="layui-btn module-insert-btn" id="module-insert-btn-{{$module->id}}" data-module-id="{{$module->id}}" style="float: right">
                                    添加商品
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table id="LAY-table-{{$module->id}}" lay-filter="LAY-table-{{$module->id}}"></table>
                        <div style="margin-top: 20px;">
                            <a href="javascript:location.reload();" class="layui-btn save-btn">取消</a>
                            <a href="javascript:void(0);" class="layui-btn save-btn" data-module-id="{{$module->id}}">保存</a>
                        </div>
                    </div>
                    </form>
                </div>
                @endforeach
            </div>
        </div>

    </div>
    <script type="text/html" id="table-toolbar">
        @{{# if(d.home_status == 2){ }}
            @{{# if(d.max_sort != d.sort){ }}
            <a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-xs relation-sort-btn" data-tag="up" data-relation-id="@{{ d.id }}" data-module-id="@{{ d.home_id }}">
                <i class="layui-icon layui-icon-up"></i>
            </a>
            @{{# } }}
            @{{# if(d.min_sort != d.sort){ }}
            <a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-xs relation-sort-btn" data-tag="down" data-relation-id="@{{ d.id }}" data-module-id="@{{ d.home_id }}">
                <i class="layui-icon layui-icon-down"></i>
            </a>
            @{{# } }}
            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs relation-del-btn" data-relation-id="@{{ d.id }}" data-module-id="@{{ d.home_id }}">
                删除
            </a>
        @{{# } }}
    </script>
    <script type="text/html" id="photoTpl">
        <a href="@{{ d.photo }}" target="_blank">
            <img style="display: inline-block; max-width:80px; " src="@{{ d.photo }}" alt="">
        </a>
    </script>
@endsection
@section('script')
    <script>
        layui.use(['form','element','table','tableSelect'], function(){
            var $ = layui.$
                ,form = layui.form
                ,element = layui.element
                ,tableSelect = layui.tableSelect
                ,table = layui.table;

            var layid = location.hash.replace(/^#tab=/, '');
            if(layid == '') layid = 1;
            element.tabChange('module-tab', layid);

            /* 选项卡切换调取表格 */
            element.on('tab(module-tab)', function(data){
                location.hash = 'tab='+ this.getAttribute('lay-id');
                var module = $(this).data('module-id');
                table.render({
                    elem: '#LAY-table-'+module
                    ,url: "{{route('goodsHome.goodstable')}}"
                    ,method: "post"
                    ,page: true //开启分页
                    ,limit:30
                    ,where: {module:module}
                    ,cols: [[
                        {field:  'index', title: '序号', align:'center', width:80, templet:function(d){return d.LAY_INDEX;}}
                        ,{field: 'photo', title: '缩略图', align:'center', toolbar:'#photoTpl', width:120}
                        ,{field: 'brand', title: '品牌', align:'center', width:200}
                        ,{field: 'goods_name', title: '商品名称'}
                        ,{field: 'sku', title: '商品ID', align:'center', width:200}
                        ,{field: 'status', title: '商品状态', align:'center', width:100}
                        ,{field: 'price', title: '默认售价', align:'center', align:'center', width:100}
                        ,{title: '操作', width:200, align: 'right', toolbar: '#table-toolbar'}
                    ]]
                });
            });

            /* 默认点击第一个选项卡 */
            $('.module-tab-li[lay-id="'+layid+'"]').trigger('click');


            /* 保存提交 */
            $('.save-btn').each(function(){
                var moduleId = $(this).data('module-id');
                var formObj = $('#module-form-'+moduleId);
                $(this).click(function(){
                    $.ajax({
                       url: '{{url('admin/goodsHome')}}/'+moduleId
                       , type: 'POST'
                       , dataType: 'json'
                       , data: formObj.serializeArray()
                       , beforeSend:function(){
                           layer.load(2);
                       }
                       , success: function (ret) {
                           if (ret.hasOwnProperty('code') && ret.code == 200) {
                               layer.msg(ret.message,{icon: 1});
                               location.reload();
                               return false;
                           }
                           layer.msg(ret.message,{icon:2});
                       }
                       , complete: function(){
                           layer.closeAll('loading');
                       }
                   });
               });
            });

            /* 新增商品 */
            $('.module-insert-btn').each(function(){
                var moduleId = $(this).data('module-id');
                tableSelect.render({
                    elem: '#module-insert-btn-'+moduleId,	//定义输入框input对象
                    width: 1000,
                    checkedKey: 'good_id',//表格的唯一建值，非常重要，影响到选中状态 必填
                    searchKey: 'keywords',	//搜索输入框的name值 默认keyword
                    searchPlaceholder: '商品名称，品牌或ID',	//搜索输入框的提示文字 默认关键词搜索
                    table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                        url: "{{route('goodsHome.goodstableAll')}}",
                        method: "post",
                        where: {'home_id':moduleId},
                        cols: [[
                            {type: 'checkbox'}
                            , {field: 'photo', title: '缩略图', align: 'center', width: 120, toolbar: '#photoTpl'}
                            , {field: 'brand', title: '品牌', align: 'center', width: 120}
                            , {field: 'goods_name', title: '商品名称'}
                            , {field: 'sku', title: '商品ID', align: 'center', width: 200}
                            , {field: 'price', title: '默认售价', width: 100}
                        ]]
                    },
                    done: function (elem, data) {
                        var selectedGoodId = '';
                        layui.each(data.data, function (index, item) {
                            selectedGoodId += item.good_id + ',';
                        });
                        $.ajax({
                            url: '{{url('admin/goodsHome')}}/'+moduleId
                            , type: 'POST'
                            , dataType: 'json'
                            , data: {selected_good_id:selectedGoodId}
                            , beforeSend:function(){
                                layer.load(2);
                            }
                            , success: function (ret) {
                                if (ret.hasOwnProperty('code') && ret.code == 200) {
                                    layer.msg(ret.message,{icon: 1});
                                    table.reload('LAY-table-'+moduleId);
                                    return false;
                                }
                                layer.msg(ret.message,{icon:2});
                            }
                            , complete: function(){
                                layer.closeAll('loading');
                            }
                        });
                    }
                });
            });

            /* 删除商品 */
            $('#module-tab').on('click','.relation-del-btn',function(){
                var relationId = $(this).data('relation-id');
                var moduleId = $(this).data('module-id');
                layer.confirm('确认删除行吗?', function(index) {
                    $.ajax({
                        url: '{{url('admin/goodsHome')}}/' + relationId
                        , type: 'POST'
                        , dataType: 'json'
                        , data: {_method: 'DELETE'}
                        , beforeSend: function () {
                            layer.load(2);
                        }
                        , success: function (ret) {
                            if (ret.hasOwnProperty('code') && ret.code == 200) {
                                layer.msg(ret.message, {icon: 1});
                                table.reload('LAY-table-' + moduleId);
                                return false;
                            }
                            layer.msg(ret.message, {icon: 2});
                        }
                        , complete: function () {
                            layer.closeAll('loading');
                        }
                    });
                });
            });
            /* 商品排序 */
            $('#module-tab').on('click','.relation-sort-btn',function(){
                var relationId = $(this).data('relation-id');
                var moduleId = $(this).data('module-id');
                var tag = $(this).data('tag');
                $.ajax({
                    url: '{{url('admin/goodsHome/sort')}}/'+relationId
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {tag:tag}
                    , beforeSend:function(){
                        layer.load(2);
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon: 1});
                            table.reload('LAY-table-'+moduleId);
                            return false;
                        }
                        layer.msg(ret.message,{icon:2});
                    }
                    , complete: function(){
                        layer.closeAll('loading');
                    }
                });
            });
        });
    </script>

@endsection